import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Flex } from 'antd';
import request from '../../utlis/request';
import { useDispatch } from 'react-redux';
import { setUserInfo } from '../../reducers/userSlice';
const App = () => {
    const dispatch = useDispatch()

    const onFinish = async (values) => {
        console.log('Received values of form: ', values);
        let res = await request.post('/login', values)
        console.log(res);
        const { code, token } = res.data
        if (code === 1) {
            localStorage.setItem('token', token)
            localStorage.setItem('username', values.username)
            let res = await request.get('/getUserInfo', { params: values })
            console.log(res);
            const { code, data } = res.data
            if (code === 1) {
                localStorage.setItem('pic', data.pic)
                localStorage.setItem('name', data.name)
                dispatch(setUserInfo({ pic: data.pic, name: data.name }))
                window.location.href = '/index/home'
            }
        }
    };
    return (
        <Form
            name="login"
            initialValues={{ remember: true }}
            style={{ maxWidth: 360 }}
            onFinish={onFinish}
        >
            <Form.Item
                name="username"
                rules={[{ required: true, message: 'Please input your Username!' }]}
            >
                <Input prefix={<UserOutlined />} placeholder="Username" />
            </Form.Item>
            <Form.Item
                name="password"
                rules={[{ required: true, message: 'Please input your Password!' }]}
            >
                <Input prefix={<LockOutlined />} type="password" placeholder="Password" />
            </Form.Item>
            <Form.Item>
                <Flex justify="space-between" align="center">
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>Remember me</Checkbox>
                    </Form.Item>
                </Flex>
            </Form.Item>

            <Form.Item>
                <Button block type="primary" htmlType="submit">
                    Log in
                </Button>
            </Form.Item>
        </Form>
    );
};
export default App;